.article-nav {
	background-color: var(--jj-article-nav-bg);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom: 1px solid var(--jj-article-nav-border);
}
.article-nav-content {
	display: flex;
	position: relative;
}
.article-nav-item {
	height: 48px;
	line-height: 48px;
	padding: 0 20px;
	font-size: 16px;
	color: var(--jj-article-nav-item-color);
	text-decoration: none;
	&:hover {
		color: var(--jj-article-nav-item-color-hover);
	}
	&:active {
		opacity: 0.7;
	}
	&.active {
		color: var(--jj-article-nav-item-color-active);
	}
}
.article-nav-line {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 16px;
	height: 3px;
	background-color: var(--jj-article-nav-line-bg);
	border-radius: 9999px;
	transition-duration: 0.3s;
	opacity: 0;
	&.show {
		opacity: 1;
	}
}

@media screen and (max-width: 640px) {
	.article-nav-item {
		padding: 0 12px;
	}
}
